import React, { Component } from 'react'
import { Icon, Tabs } from 'antd'
import '../../less/index.less'
import '../../less/program-list.less'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import * as actions from '../../actions/progarm'
import ProgramManagement from './program-management'
import ProgramWorkspace from './program-workspace'
import { FormattedMessage } from 'react-intl'
import { getUserOrganizations } from '../../actions/organization'

const TabPane = Tabs.TabPane
const PROGRAM_MANAGEMENT = '1'

class InstructorProgramListPageBody extends Component {
  state = {
    currentIndex: PROGRAM_MANAGEMENT,
    defaultPage: 1
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.user !== this.props.user) {
      const {defaultPage} = this.state
      this.props.getPrograms(defaultPage)
      this.props.getWorkspacePrograms(defaultPage)
      this.props.getUserOrganizations(nextProps.user.id)
    }
  }

  componentDidMount () {
    const {defaultPage} = this.state
    this.props.getPrograms(defaultPage)
    this.props.getWorkspacePrograms(defaultPage)

  }

  render () {
    const {programList, workspacePage,organizations} = this.props

    return (
      <Tabs defaultActiveKey={this.state.currentIndex} onChange={(currentIndex) => this.setState({currentIndex})}>
        <TabPane tab={
          <span>
            <Icon type='appstore-o'/>
            <FormattedMessage id='训练营管理'/>
          </span>}
                 key='1'>
          <ProgramManagement
            deleteProgram={this.props.deleteProgram}
            addProgram={this.props.addProgram}
            copyProgram={this.props.copyProgram}
            editProgram={this.props.editProgram}
            getPrograms={this.props.getPrograms}
            programPage={programList}
            copyProgramToOrganization={this.props.copyProgramToOrganization}
            organizations={organizations}
          />

        </TabPane>
        <TabPane tab={
          <span>
          <Icon type='appstore'/><FormattedMessage id='我的工作区'/>
        </span>}
                 key='2'>
          <ProgramWorkspace
            workspacePage={workspacePage}
            getWorkspacePrograms={this.props.getWorkspacePrograms}
            deleteProgram={this.props.deleteProgram}
            copyProgram={this.props.copyProgram}
            editProgram={this.props.editProgram}
            copyProgramToOrganization={this.props.copyProgramToOrganization}
            organizations={organizations}
          />
        </TabPane>
      </Tabs>
    )
  }
}

const mapStateToProps = state => ({
  programList: state.instructorPrograms,
  settings: state.settings,
  workspacePage: state.workspacePage,
  user: state.user,
  organizations: state.organizations
})

const mapDispatchToProps = dispatch => ({
  getPrograms: (page, pageSize) => dispatch(actions.getPrograms(page, pageSize)),
  getWorkspacePrograms: (page, pageSize) => dispatch(actions.getWorkspacePrograms(page, pageSize)),
  addProgram: newProgram => dispatch(actions.addPrograms(newProgram)),
  deleteProgram: (programId, page, pageSize, callback) => dispatch(actions.deleteProgram(programId, page, pageSize, callback)),
  editProgram: (program, page, pageSize) => dispatch(actions.editProgram(program, page, pageSize)),
  copyProgram: (programId, callback) => dispatch(actions.copyProgram(programId, callback)),
  copyProgramToOrganization: (programId, organizationId, callback) => dispatch(actions.copyProgramToOrganization(programId, organizationId,callback)),
  getUserOrganizations: (userId) => dispatch(getUserOrganizations(userId))
})
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(InstructorProgramListPageBody))
